# Quick start

import { PackageManagerTabs } from '@theme';

## 1. Initialize the project

### Method 1: create via CLI

You can create a Rspress project using the `create-rspress` cli:

<PackageManagerTabs command="create rspress@latest" />

Input the project directory name, and then the cli will create the project for you.

### Method 2: manual creation

First, you can create a new directory with the following command:

```bash
mkdir rspress-app && cd rspress-app
```

Execute `npm init -y` to initialize a project. You can install Rspress using npm, pnpm, yarn or bun:

<PackageManagerTabs command="install rspress -D" />

Then create the file with the following command

```bash
mkdir docs && echo '# Hello world' > docs/index.md
```

Add the following script to `package.json`:

```json
{
  "scripts": {
    "dev": "rspress dev",
    "build": "rspress build",
    "preview": "rspress preview"
  }
}
```

Then initialize a configuration file `rspress.config.ts`:

```ts title="rspress.config.ts"
import { defineConfig } from '@rspress/core';

export default defineConfig({
  root: 'docs',
});
```

And then create `tsconfig.json`, add the following config:

```json
{
  "compilerOptions": {
    "lib": ["DOM", "ES2020"],
    "jsx": "react-jsx",
    "target": "ES2020",
    "noEmit": true,
    "skipLibCheck": true,
    "useDefineForClassFields": true,

    /* modules */
    "module": "ESNext",
    "moduleDetection": "force",
    "moduleResolution": "bundler",
    "verbatimModuleSyntax": true,
    "resolveJsonModule": true,
    "allowImportingTsExtensions": true,
    "noUncheckedSideEffectImports": true,
    "isolatedModules": true,

    /* type checking */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["docs", "theme", "rspress.config.ts"],
  "mdx": {
    "checkMdx": true
  }
}
```

## 2. Start dev server

Start the local development service with the following command:

```bash
npm run dev
```

:::tip TIP

For the dev command, you can specify the port number or host of the development service with the `--port` or `--host` parameter, such as `rspress dev --port 8080 --host 0.0.0.0`.

:::

## 3. Build in production

Build the production bundle with the following command
:

```bash
npm run build
```

By default, Rspress will set `doc_build` as the output directory.

## 4. Preview in local environment

Start the local preview service with the following command:

```bash
npm run preview
```
